<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>Quasar App - qiantu_car_umd_v01</title>
    <link href="lib/css/meterial_icons.css" rel="stylesheet" type="text/css">
    <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> -->
    <link href="lib/css/animate.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet"> -->
    <!-- <link rel="icon" href="favicon.png" type="image/x-icon"> -->
    <link href="lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <!-- <link href="https://cdn.jsdelivr.net/npm/quasar-framework@^0.16.0/dist/umd/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css"> -->

    <style type="text/css">
      .logo-container {
        width: 255px;
        height: 242px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
      .logo {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="q-app">
      <q-layout view="lHh Lpr fff">
        <q-layout-header>
          <q-toolbar
            :glossy="$q.theme === 'mat'"
            :inverted="$q.theme === 'ios'"
          >
            <q-btn flat round dense @click="drawerState = !drawerState" icon="menu"></q-btn>

            <q-toolbar-title>
              Quasar App - qiantu_car_umd_v01
              <div slot="subtitle">Running on Quasar v{{ version }}</div>
            </q-toolbar-title>
          </q-toolbar>
        </q-layout-header>

        <q-layout-drawer
          v-model="drawerState"
          :content-class="$q.theme === 'mat' ? 'bg-grey-3' : null"
        >
          <q-list no-border link inset-delimiter>
            <q-list-header>Essential Links</q-list-header>
            <q-item @click.native="launch('http://quasar-framework.org')">
              <q-item-side icon="school"></q-item-side>
              <q-item-main label="Docs" sublabel="quasar-framework.org"></q-item-main>
            </q-item>
            <q-item @click.native="launch('https://discord.gg/5TDhbDg')">
              <q-item-side icon="chat"></q-item-side>
              <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg"></q-item-main>
            </q-item>
            <q-item @click.native="launch('http://forum.quasar-framework.org')">
              <q-item-side icon="forum"></q-item-side>
              <q-item-main label="Forum" sublabel="forum.quasar-framework.org"></q-item-main>
            </q-item>
            <q-item @click.native="launch('https://twitter.com/quasarframework')">
              <q-item-side icon="rss feed"></q-item-side>
              <q-item-main label="Twitter" sublabel="@quasarframework"></q-item-main>
            </q-item>
          </q-list>
        </q-layout-drawer>

        <q-page-container>
          <my-page></my-page>
        </q-page-container>
      </q-layout>
    </div>
    
    <script type="text/x-template" id="my-page">
      <q-page padding>

        <!-- page content; replace this entirely -->
        <div class="row flex-center absolute-full">
          <img src="quasar-logo-full.svg">
        </div>

      </q-page>
    </script>

    <script src="lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/quasar-framework@^0.16.0/dist/umd/quasar.ie.polyfills.umd.min.js"></script> -->
    <script src="lib/js/vue.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script> -->
    <script src="lib/js/quasar.mat.umd.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/quasar-framework@^0.16.0/dist/umd/quasar.mat.umd.min.js"></script> -->

    <script>
      
      Vue.component('my-page', {
        template: '#my-page'
      })

      new Vue({
        el: '#q-app',
        data: function () {
          return {
            version: Quasar.version,
            drawerState: true
          }
        },
        methods: {
          launch: function (url) {
            Quasar.utils.openURL(url)
          }
        }
      })

    </script>
  </body>
</html>
